<template>
  <div>
    <header-top title="通讯录" >
      <div @click="$router.back()" class="back" slot="back"></div>
    </header-top>
    <div class="content clearfix">
      <teacher-class @data = 'getList' />
      <table class="Table">
        <thead>
        <tr>
          <th width="22%">学生</th>
          <th width="16%">关系</th>
          <th width="22%">家长姓名</th>
          <th width="40%">家长电话</th>
        </tr>
        <template v-for="(parent,index) of parentList">
          <tr v-if="parent.phoneNo_f">
            <td>{{parent.studentName}}</td>
            <td>父亲</td>
            <td>{{parent.fullName_f}}</td>
            <td>{{parent.phoneNo_f}}</td>
          </tr>
          <tr v-if="parent.phoneNo_m">
            <td>{{parent.studentName}}</td>
            <td>母亲</td>
            <td>{{parent.fullName_m}}</td>
            <td>{{parent.phoneNo_m}}</td>
          </tr>
        </template>


        </thead>
      </table>

    </div>
  </div>

</template>

<script>
  import headerTop from "@/components/headerTop/headerTop";
  import teacherClass from "@/components/teacherClass/teacherClass";
  import { Toast } from 'vant';   //使用消息提示
  import {reqBook} from "@/api";

  export default {
    name: "book",
    components:{
      headerTop:headerTop,
      teacherClass:teacherClass,
    },
    data(){
      return{
        parentList:null,
        classId:null,
      }
    },
    mounted() {
      let classId = this.$store.state.teacherClass[0].id
      let data = {classId:classId}
      this.getList(data)
    },
    methods:{
      async getList(data){
        let parents = await reqBook(data.classId)
        this.parentList = parents.data
        console.log(this.parentList)
      }
    }
  }
</script>

<style scoped>
  .Table{font-size: 1.1rem; color: #666; text-align: left;}
  .Table td{height: 2.8rem; padding-left: 1rem;}
  .Table th{ height: 2.8rem; color: #00c08c; padding-left: 1rem;}
</style>
